<div>
  <ul id="template-tabs">
    <li class="nav-item">
      <a data-i18n="notify.tab.home" class="nav-link active" data-toggle="tab" href="#sieve-widget-notifyaction" role="tab"></a>
    </li>
    <li class="nav-item">
      <a data-i18n="notify.tab.advanced" class="nav-link" data-toggle="tab" href="#sieve-widget-advanced" role="tab"></a>
    </li>
    <li class="nav-item">
      <a data-i18n="notify.tab.help" class="nav-link" data-toggle="tab" href="#sieve-widget-help" role="tab"></a>
    </li>
  </ul>

  <div id="template-content">
    <div class="tab-content m-2">
      <div class="tab-pane fade show active" id="sieve-widget-notifyaction" role="tabpanel">
        <label data-i18n="notify.method"></label>
        <div id="sivNotifyMethod" data-list-dropdown="#sivNotifyMethodTemplate">
        </div>

        <div id="sivNotifyMethodTemplate" class="d-none">
          <div class="dropdown-menu dropdown-menu-right" style="min-width:100%">
            <button class="dropdown-item" type="button" data-value="tel:+1234567890">
              <div data-i18n="notify.method.tel"></div>
              <div data-i18n="notify.method.tel.text" class="text-muted"></div>
            </button>
            <button class="dropdown-item" type="button" data-value="xmpp:me@example.com?message;subject=SIEVE;body=You%20got%20mail">
              <div data-i18n="notify.method.xmpp"></div>
              <div data-i18n="notify.method.xmpp.text" class="text-muted"></div>
            </button>
            <button class="dropdown-item" type="button" data-value="mailto:me@example.com">
              <div data-i18n="notify.method.mail"></div>
              <div data-i18n="notify.method.mail.text" class="text-muted"></div>
            </button>
          </div>
        </div>

        <br />

        <div class="form-check">
            <input type="radio" id="rbxSieveNotifyMessageDefault" name="sivNotifyMessage" value="false" class="form-check-input"/>
            <label data-i18n="notify.message.default" class="form-check-label" for="rbxSieveNotifyMessageDefault"></label>
            <p data-i18n="notify.message.default.text" class="form-text"></p>
        </div>
        <div class="form-check">
            <input type="radio" id="rbxSieveNotifyMessageCustom" name="sivNotifyMessage" value="true" class="form-check-input"/>
            <label data-i18n="notify.message.custom" class="form-check-label" for="rbxSieveNotifyMessageCustom"></label>
            <p data-i18n="notify.message.custom.text" class="form-text"></p>

            <textarea class="form-control" id="txtSieveNotifyMessage" rows="5"> </textarea>
        </div>
      </div>
      <div class="tab-pane fade" id="sieve-widget-advanced" role="tabpanel">
        <div class="form-check">
          <input type="checkbox" class="form-check-input" id="cbxSieveNotifyFrom" />
          <label data-i18n="notify.from" class="form-check-label" for="cbxSieveNotifyFrom"></label>
          <p data-i18n="notify.from.text" class="form-text"></p>
          <div id="txtSieveNotifyFrom">
          </div>

        </div>

        <br />

        <div class="form-check">
            <input type="checkbox" class="form-check-input" id="cbxSieveNotifyImportance" />
            <label data-i18n="notify.importance" class="form-check-label" for="cbxSieveNotifyImportance"></label>
            <p data-i18n="notify.importance.text" class="form-text text-muted"></p>

            <div class="form-check">
                <input type="radio" id="rbxSieveNotifyImportanceHigh" name="sivNotifyImportance" class="form-check-input" value="1" />
                <label data-i18n="notify.importance.high" class="form-check-label" for="rbxSieveNotifyImportanceHigh"></label>
            </div>
            <div class="form-check">
                <input type="radio" id="rbxSieveNotifyImportanceNormal" name="sivNotifyImportance" class="form-check-input" value="2" />
                <label data-i18n="notify.importance.normal" class="form-check-label" for="rbxSieveNotifyImportanceNormal"></label>
            </div>
            <div class="form-check">
                  <input type="radio" id="rbxSieveNotifyImportanceLow" name="sivNotifyImportance" class="form-check-input" value="3" />
                  <label data-i18n="notify.importance.low" class="form-check-label" for="rbxSieveNotifyImportanceLow"></label>
            </div>
        </div>

        <br />
        <!-- <optionname>=<value>
        optionname = ALPHA / DIGIT *(ALPHA / DIGIT / "." / "-" / "_")
        value = *(%x01-09 / %x0B-0C / %x0E-FF) -->

        <div class="form-check">
          <input type="checkbox" class="form-check-input" id="cbxSieveNotifyOptions" />
          <label data-i18n="notify.options" class="form-check-label" for="cbxSieveNotifyOptions"></label>
          <p data-i18n="notify.options.text" class="form-text"></p>
          <div id="txtSieveNotifyOptions" data-list-min="0">
          </div>
        </div>
      </div>
      <div class="tab-pane fade form-text" id="sieve-widget-help" role="tabpanel">
        <p data-i18n="notify.help" style="white-space: pre-line"></p>
        <p data-i18n="notify.help.alert" class="alert alert-info" role="alert"></p>
      </div>
    </div>
  </div>
</div>